// import React,{useState,useEffect} from 'react'

// export default function index() {
//     const [count,setCount] = useState(0);
//     useEffect(()=>{
//         const todoList = document.getElementById('todoList');
//         const newItem = document.createElement('li');
//         newItem.innerHTML = `我是第${count}个待办项`;
//         todoList.append(newItem)
//     })
//     return (
//         <div>
//             <p>当前共计{count}个todo Item</p>
//             <ul id="todoList"></ul>
//             <button onClick={()=>setCount(count + 1)}>点我增加一个代办项</button>
//         </div>
//     )
// }
// import React from 'react';
// // 定义类组件
// export default class IncreasingTodoList extends React.Component {

//   // 初始化 state
//   state = { count: 0 }
//   // 此处调用上个 demo 中 useEffect 中传入的函数
//   componentDidMount() {
//     this.addTodoItem()
//   }
//   // 此处调用上个 demo 中 useEffect 中传入的函数
//   componentDidUpdate() {
//     this.addTodoItem()
//   }
//   // 每次 count 增加时，都增加对应的待办项
//   addTodoItem = () => {
//     const { count } = this.state
//     const todoList = document.getElementById("todoList")
//     const newItem = document.createElement("li")
//     newItem.innerHTML = `我是第${count}个待办项`
//     todoList.append(newItem)
//   }

//   // 定义渲染内容
//   render() {
//     const { count } = this.state
//     return (
//       <div>
//         <p>当前共计 {count} 个todo Item</p>
//         <ul id="todoList"></ul>
//         <button
//           onClick={() =>
//             this.setState({
//               count: this.state.count + 1,
//             })
//           }
//         >
//           点我增加一个待办项
//         </button>
//       </div>
//     )
//   }
// }
// export default IncreasingTodoList;
import React, { Component } from 'react'

export default class index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            count: 0
        }
    }
    componentDidMount() {
        // this.addTodoItem()
    }
    // addTodoItem = () => {
    //     const { count } = this.state
    //     const todoList = document.getElementById('todoList')
    //     const newItem = document.createElement('li')
    //     newItem.innerHTML = `我是第${count}个待办项`
    //     todoList.append(newItem)
    // }
    render() {
        const { count } = this.state
        return (
            <div>
                <p>当前共计 {count} 个todo Item</p>
                <ul id="todoList"></ul>
                <button
                    onClick={() => {
                        this.setState({
                            count: this.state.count + 1
                        })
                    }}
                >点我添加一个待办项</button>
            </div>
        )
    }
}
